<template>
    <div>
        <el-row type="flex" class="editformitem" v-if="isShowCheckout">
            <el-col :span="8" class="editlabel">
                <span>标题可见</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-checkbox v-model="obj.isShowTitle"></el-checkbox>
            </el-col>
        </el-row>
        <template v-if="!isShowCheckout || obj.isShowTitle">
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>标题</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model="obj.title" type="text" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>标题字体</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input type="number" v-model.number="obj.style.fontSize" class="miniinput" min="12" />
                    <el-color-picker v-model="obj.style.color" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj.style, 'color', $event)" />
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.style.fontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj.style, 'fontWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': obj.style.fontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj.style, 'fontStyle')"><i
                                class="iconfont icon-zitixieti"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>标题位置</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <div class="flex">
                        <div :class="flexstyle('flex-start')" @click="setjustifyContent('flex-start')">
                            <i class="iconfont icon-zuoduiqi"></i>
                        </div>
                        <div :class="flexstyle('center')" @click="setjustifyContent('center')">
                            <i class="iconfont icon-shuipingjuzhongduiqi"></i>
                        </div>
                        <div :class="flexstyle('flex-end')" @click="setjustifyContent('flex-end')">
                            <i class="iconfont icon-youduiqi"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </template>
    </div>
</template>

<script>
export default {
    name: "TitleForm",
    props: {
        predefineColors: Array,
        obj: Object,
        setColorChange: Function,
        setFontStyle: Function,
        isShowCheckout: {
            type: Boolean,
            default: true,
        }
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        flexstyle(style, item) {
            if (item) {
                if (item['justifyContent'] == style) {
                    return ["flexstyle", "active"];
                } else {
                    return ["flexstyle"];
                }
            }
            if (this.obj.style.justifyContent == style) {
                return ["flexstyle", "active"];
            } else {
                return ["flexstyle"];
            }
        },
        setjustifyContent(style, item) {
            if (item) {
                item['justifyContent'] = style;
            } else {
                this.obj.style.justifyContent = style;
            }
            this.$emit("change", this.obj);
        },
    }
}
</script>